<template>
    <div class="page">
        <div class="search">
            <el-row style="padding-bottom:1%">
                <el-col :span="5" :offset="13">
                    <span>飞机编号</span>
                    <el-input v-model="plane_id" size="small" style="width: 60%"></el-input>
                </el-col>
                <el-col :span="3">
                    <el-button type="primary" @click="searchFlightList(1)">搜 索</el-button>
                </el-col>
                <el-col :span="3">
                    <el-button type="primary" plain @click="getFlightList(1)">查看全部</el-button>
                </el-col>
            </el-row>
            <el-row class="btn-group">
                <el-col :span="3" :offset="18">
                    <el-button type="primary" @click="editFlight({},false)">新建航班</el-button>
                </el-col>
                <el-col :span="3">
                    <el-button type="warning" v-print="'#printContent'">打印表格</el-button>
                </el-col>
            </el-row>
        </div>
        <el-table :data="flightList" border id="printContent">
            <el-table-column type="expand">
                <template slot-scope="props">
                    <el-form label-width="90px" class="demo-table-expand">
                        <el-form-item label="飞机编号">
                            <span>{{ props.row.plane_id }}</span>
                        </el-form-item>
                        <el-form-item label="经济舱价格">
                            <span>{{props.row.touristClassPrice}}</span>
                        </el-form-item>
                        <el-form-item label="商务舱价格">
                            <span>{{props.row.businessClassPrice}}</span>
                        </el-form-item>
                        <el-form-item label="头等舱价格">
                            <span>{{props.row.firstClassPrice}}</span>
                        </el-form-item>
                        <el-form-item label="经济舱余量">
                            <span>{{props.row.touristClassRemain}}</span>
                        </el-form-item>
                        <el-form-item label="商务舱余量">
                            <span>{{props.row.businessClassRemain}}</span>
                        </el-form-item>
                        <el-form-item label="头等舱余量">
                            <span>{{props.row.firstClassRemain}}</span>
                        </el-form-item>
                        <el-form-item label="备注">
                            <span>{{props.row.remark}}</span>
                        </el-form-item>
                    </el-form>
                </template>
            </el-table-column>
            <el-table-column prop="flight_id" label="航班编号" width="110" sortable></el-table-column>
            <el-table-column prop="plane_id" label="飞机编号" width="100"></el-table-column>
            <el-table-column prop="from_city" label="出发城市"></el-table-column>
            <el-table-column prop="to_city" label="到达城市"></el-table-column>
            <el-table-column prop="startTime" label="出发时间" >
                <template slot-scope="scope">
                    <span>{{getDate(scope.row.startTime)}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="arriveTime" label="到达时间">
                <template slot-scope="scope">
                    <span>{{getDate(scope.row.arriveTime)}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="state" label="当前状态">
                <template slot-scope="scope">
                    <el-tag type="danger" v-show="getState(scope.row)==1">延误</el-tag>
                    <el-tag type="info" v-show="getState(scope.row)==2">未起飞</el-tag>
                    <el-tag type="info" v-show="getState(scope.row)==3">已到达</el-tag>
                    <el-tag type="success" v-show="getState(scope.row)==4">正在飞行</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="option" label="操作" width="180">
                <template slot-scope="scope">
                    <el-button size="small" type="warning" @click="editFlight(scope.row,true)" plain>编辑</el-button>
                    <el-button size="small" type="danger" @click="deleteFlight(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="block">
            <el-pagination :current-page.sync="currentPage" :page-size="10" :total="count"
                layout="prev, pager, next, jumper" @current-change="handleCurrentChange">
            </el-pagination>
        </div>
        <el-dialog title="编辑数据" :visible.sync="dialogVisible" v-if="dialogVisible">
            <flightEditor :form ="flight" :disable="isEdit" 
                @closeDialog="dialogVisible=false"  @refresh="refresh"></flightEditor>
        </el-dialog>
    </div>
</template>
<script>
import flightEditor from './base/flight-editor'
import {formatTimeToStr,compareTime} from "../../../core/config/time-methods"
export default {
    name:'flight',
    components:{
        flightEditor
    },
    data(){
        return{
            flightList:[],
            flight:{},
            isEdit:false,
            dialogVisible: false,
            count:0,
            currentPage:1,
            plane_id:'',
            isSearch:false
        }
    },
    methods:{
        getFlightList(page){
            this.isSearch = false
            this.currentPage = page
            this.plane_id = ""
            this.getMethod(`/api/flight/getFlightList?page=${page}`,"get",{},(data)=>{
                this.flightList = data.list;
                this.count = data.count;
            })
        },
        searchFlightList(page){
            if(this.checkEmpty(this.plane_id, "飞机编号")){
                return;
            }
            this.isSearch = true
            this.currentPage = page
            this.getMethod(`/api/flight/searchFlightList?page=${page}&plane_id=${this.plane_id}`,"get",{},(data)=>{
                this.flightList = data.list;
                this.count = data.count;
            })
        },
        handleCurrentChange(current){
            if(this.isSearch){
                this.searchFlightList(current)
            }else{
                this.getFlightList(current)
            }
        },
        editFlight(flight,isEdit){
            this.flight = flight;
            this.isEdit = isEdit;
            this.dialogVisible = true;
        },
        deleteFlight(flight){
            this.showConfirm('是否确认删除该航班?','提示','warning',()=>{
                this.$http.post("/api/flight/deleteFlight",{
                    flight_id:flight.flight_id,
                    admin_id:this.$cookies.get("admin").admin_id
                }).then((res)=>{
                    if(this.checkCode(res.status)){
                        this.showMessage('删除成功!', 'success');
                        let index = this.planeList.findIndex(obj => obj.plane_id == plane.plane_id)
                        this.planeList.splice(index, 1);
                    }else{
                        this.showMessage('操作失败','error');
                    }
                })
            })
        },
        getDate(time){
            let date = new Date(time);
            return formatTimeToStr(date,"yyyy-MM-dd hh:mm:ss");
        },
        getState(item){
            if(!compareTime(new Date(),item.startTime) && item.state == 1) return 1;
            else if(!compareTime(new Date(),item.startTime) && item.state == 0) return 2;
            else if(!compareTime(item.arriveTime,new Date())) return 3;
            else return 4;
        },
        refresh(){
            this.handleCurrentChange(this.currentPage);
        }
    },
    mounted(){
        this.getFlightList(1);
    }
}
</script>